<template>
  <div>
    <div class="title">首页展示商品类型选择：</div>
    <div class="content">
      <div class="section">
        <picker
          class="sectionBox"
          @change="bindPickerChange"
          :range="array"
          :value="goodsTypeId"
        >
          <div class="picker">{{select}}</div>
          <div class="s"></div>
        </picker>
      </div>
      <div class="hint">从店铺已添加商品类型中选择一类，在首页展示</div>
      <div class="btn">
        <button
          @click="handleClick"
          class="okBtn"
          type="primary"
          shape="circle"
          size="small"
        >保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import { UPDATE_SHOP_DECORATION_API, FIND_GOODS_TYPE_LIST_API } from '@/api'

export default {
  components: {},
  data () {
    return {
      goodsTypeId: '', // 一出来就获取的默认选项
      arrLength: 0, // 总条数
      num: 0, // 默认传走的参数(暂时不修改)
      array: [],
      dataArray: [],
      select: '',
      defaultSubscript: '' // （这个才是要传走的数
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  onShow () {
    this.init()
  },
  created () {},
  methods: {
    bindPickerChange (e) {
      const vm = this
      for (let i = 0; i < vm.array.length; i++) {
        if (Number(e.mp.detail.value) === Number(i)) {
          console.log(vm.array[i])
          vm.select = vm.array[i]
          vm.goodsTypeId = i
        }
      }
      vm.findData(vm.goodsTypeId)
    },
    findData (val) {
      for (let i = 0; i < this.arrLength; i++) {
        if (val === i) {
          this.defaultSubscript = this.dataArray[i].goodsTypeId
        }
      }
    }, // 找goodsTypeId
    handleClick () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        goodsTypeId: vm.defaultSubscript,
        template: vm.$root.$mp.query.val
      }
      UPDATE_SHOP_DECORATION_API(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('保存成功').then(() => {
              vm.$router.go('-2')
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 确定按钮
    init () {
      this.arrLength = 0
      this.array = []
      this.dataArray = []
      this.select = ''
      this._getData(Number(this.$root.$mp.query.goodsTypeId))
    },
    _getData (goodsTypeId) {
      const vm = this
      FIND_GOODS_TYPE_LIST_API(vm.account.shopId, vm.num)
        .then(r => {
          if (r.data.code === '0') {
            vm.arrLength = r.data.data.length
            let data = r.data.data
            vm.dataArray = r.data.data
            for (let j = 0; j < vm.arrLength; j++) {
              vm.array.push(data[j].goodsTypeName)
              if (goodsTypeId === data[j].goodsTypeId) {
                vm.goodsTypeId = j
                vm.defaultSubscript = data[j].goodsTypeId
                vm.select = vm.array[j]
              }
            }
            // vm.forInit(vm.arrLength)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 请求回来数据
    forInit (len) {
      for (let i = 0; i < len; i++) {
        if (this.goodsTypeId === Number(i)) {
          this.select = this.array[i]
          this.defaultSubscript = this.dataArray[i].goodsTypeId
        }
      }
      console.log('选项框默认选项:', this.defaultSubscript)
    } // 感觉没用 先留着 到时候再删
  }
}
</script>

<style lang="scss">
.title {
  font-size: 14px;
  color: #000;
  border-left: 5px solid #5692ff;
  padding-left: 10px;
}
.content {
  width: 340px;
  margin: auto;
  .section {
    margin: 20px 0;
    padding: 10px 0;
    border: 1px solid #ececec;
    border-radius: 4px;
    font-size: 14px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sectionBox {
      width: 100%;
      .picker {
        margin-left: 10px;
      }
    }
    .s {
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: #5795ff transparent transparent transparent;
      margin-right: 10px;
      margin: 5px 10px 0 0;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translate(0, -50%);
    }
  }
  .hint {
    font-size: 12px;
    color: #8b8b8b;
  }
  .btn {
    margin-top: 100px;
    .okBtn {
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      color: #fff !important;
      margin: 10px;
      background: #508ff9;
      border-radius: 25px;
    }
  }
}
</style>
